<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <el-card
      class="filter-container"
      shadow="never"
    >
      <div>
        <i class="el-icon-search"></i>
        <span>{{$t('common.filterSearch')}}</span>
        <el-button
          style="float: right"
          type="primary"
          size="small"
          @click="searchMachine(health_record_id)"
        >
          {{ $t('common.search') }}
        </el-button>
      </div>

      <div style="margin-top: 25px">
        <el-form
          :inline="true"
          size="small"
          label-width="140px"
        >
          <el-form-item label="搜索档案ID：">
            <el-input
              style="width: 203px"
              v-model="health_record_id"
              placeholder="档案ID"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

    </el-card>

    <!-- 添加档案-->
    <div align="right">
      <el-button
        icon="el-icon-thumb"
        type="primary"
        size="small"
        @click="fetchData"
      >
        显示列表
      </el-button>
      <el-button
        type="success"
        icon="el-icon-plus"
        @click="showAddDialog"
      >添加档案</el-button>
    </div>

    <!-- 档案列表 -->
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        align="center"
        width="90"
        label="档案ID"
      >
        <template slot-scope="scope">
          {{ scope.row.health_record_id }}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        width="90"
        label="用户ID"
      >
        <template slot-scope="scope">
          {{ scope.row.user_id }}
        </template>
      </el-table-column>

      <el-table-column
        label="体重"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag>{{ scope.row.weight }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="血压"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.blood_pressure }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        width="150"
        label="血糖"
      >
        <template slot-scope="scope">
          <el-tag type="warning">{{ scope.row.blood_sugar }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="添加时间"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          {{ dateFormat(scope.row.create_time) }}
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('common.operate')"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">

          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="editMachine(scope.row)"
          >
            {{ $t('common.update') }}
          </el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="delMachine(scope.row.health_record_id)"
          >
            {{ $t('common.delete') }}
          </el-button>

        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <div
      class="block"
      style="float: right; margin-top: 20px"
    >
      <!-- <span class="demonstration">显示总数</span> -->
      <el-pagination
        background
        @current-change="fetchData"
        :current-page.sync="page_num"
        :page-size="page_size"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>

      <!-- 对话框 -->
      <el-dialog
        :title="machine_form.health_record_id ? '修改档案信息' : '添加档案信息'"
        :visible.sync="dialogFormVisible"
      >
        <el-form
          style="width: 80%"
          :model="machine_form"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item
            label="用户ID："
            label-width="120px"
            prop="user_id"
          >
            <el-input
              autocomplete="off"
              v-model.number="machine_form.user_id"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="体重："
            label-width="120px"
            prop="weight"
          >
            <el-input
              autocomplete="off"
              v-model.number="machine_form.weight"
            ></el-input>

          </el-form-item>

          <el-form-item
            label="血压："
            label-width="120px"
            prop="blood_pressure"
          >
            <el-input
              autocomplete="off"
              v-model.number="machine_form.blood_pressure"
            ></el-input>

          </el-form-item>

          <el-form-item
            label="血糖："
            label-width="120px"
            prop="blood_sugar"
          >
            <el-input
              autocomplete="off"
              v-model.number="machine_form.blood_sugar"
            ></el-input>

          </el-form-item>

          <el-form-item
            label="创建时间："
            label-width="120px"
            prop="create_time"
          >
            <el-input
              autocomplete="off"
              v-model.number="machine_form.create_time"
            ></el-input>

          </el-form-item>

          <el-form-item
            label="更新时间："
            label-width="120px"
            prop="update_time"
          >
            <el-input
              autocomplete="off"
              v-model.number="machine_form.update_time"
            ></el-input>

          </el-form-item>

        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="addOrEditMachine"
          >确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import healthmanage from "@/api/healthmanage";
export default {
  name: "machinelist",
  data() {
    return {
      health_record_id: "",
      list: [], //档案列表
      page_num: 1,
      page_size: 100, //每100个数据一页
      total: 1, //初始化
      dialogFormVisible: false, //对话框（查看）
      machine_form: {},
      rules: {
        user_id: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        weight: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        blood_pressure: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        blood_sugar: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        create_time: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
        update_time: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { type: "number", message: "请输入数字值", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    dateFormat: function (time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    //渲染档案列表
    fetchData() {
      var id = this.$route.query.user_id;
      console.log(id);
      healthmanage
        .getHealthData(id)
        .then((res) => {
          this.list = res.data.bodyData;
          // console.log(this.list);
          this.total = res.data.bodyData.length;
        })
        .catch((error) => {});
    },
    //搜索档案
    searchMachine(health_record_id) {
      var vm = this;
      healthmanage
        .getMachineById(this.health_record_id)
        .then((res) => {
          // console.log(res)
          if (res.errorCode == 0) {
            vm.$message({
              message: "查找成功！",
              type: "success",
            });
            var searchList = [];
            searchList.push(res.data.bodyData);
            vm.list = searchList;
            vm.total = searchList.length;
            this.health_record_id = "";
          }
        })
        .catch((error) => {});
    },
    //添加档案显示
    showAddDialog() {
      this.dialogFormVisible = true;
      this.machine_form = {};
    },
    //编辑档案显示
    editMachine(row) {
      // console.log(row);
      this.dialogFormVisible = true;
      this.machine_form = { ...row };
    },
    //添加/编辑证书
    addOrEditMachine() {
      this.$refs.ruleForm.validate(async (success) => {
        //如果全部字段符合条件
        if (success) {
          this.dialogFormVisible = false;
          let result = await healthmanage.addOrEditMachine(this.machine_form);
          if (result.errorCode == 0) {
            this.$message({
              type: "success",
              message: this.machine_form.health_record_id
                ? "修改档案信息成功"
                : "添加档案信息成功",
            });
            this.fetchData();
          }
        } else {
          vm.$message.error("error");
          console.log(error);
        }
      });
    },
    //删除证书
    delMachine(health_record_id) {
      // console.log(certificate_id);
      this.$confirm("此操作将永久删除该档案信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //调用接口
          healthmanage.delMachine(health_record_id).then((res) => {
            //提示
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            //刷新页面数据
            this.fetchData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
